<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title" :hideBg="hideBg" statusHeight :txtColor="txtColor" :backColor="backColor"></status-bar>
        <image :src="$imgUrls(info.atlas)" mode="widthFix" class="rows"></image>

        <view class="tab">
            <view class="tabList" v-for="(item, index) in tabData" :key="index" @click="toClassify(item)">
                <image :src="$imgUrls(item.img)" mode="aspectFill" class="tabImg"></image>
                <text class="tabName ellipsis">{{ item.name }}</text>
            </view>
        </view>

        <u-sticky :customNavHeight="totalHeight">
            <view class="Tabs">
                <u-tabs :list="snatch" :lineWidth="54" :lineColor="color" :current="current" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="click"></u-tabs>
            </view>
        </u-sticky>

        <listOne v-if="current == 0" :pageData="pageData"></listOne>
        <listTwo v-if="current == 1" :pageData="pageData"></listTwo>

        <view class="fixBox">
            <view class="d-flex a-center j-centert flex-1" @click="issue">
                <view class="iconfont icon-jiahao color size42 bold"></view>
                <text class="color size36 bold m-left10">发布</text>
            </view>
            <view class="Me" @click="toPush">
                <view class="iconfont icon-a-001 color_33 size42"></view>
                <text class="color_33 size30 m-left6">我的</text>
            </view>
        </view>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    import listOne from '@/grab/components/listOne.vue';
    import listTwo from '@/grab/components/listTwo.vue';
    export default {
        components: {
            listOne,
            listTwo
        },
        data() {
            return {
                showModal: false,
                title: ' ',
                hideBg: 1,
                txtColor: true,
                backColor: true,
                tabData: [],
                current: 0,
                snatch: [],
                snatch_type: 1,
                info: '',
                page: 1,
                limit: 10,
                getMore: false,
                pageData: []
            };
        },
        onLoad() {
            this.goodsList();
        },
        methods: {
            ...mapMutations(['setGrab']),
            goodsList() {
                this.$http
                    .get({
                        url: '/SnatchApi/goodsList'
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        this.tabData = result.list || [];
                        this.snatch = result.snatch || [];
                        this.info = result;
                        this.setGrab({
                            snatch: result.snatch || []
                        });
                        this.init();
                    });
            },

            // 热销推荐
            getShopSnatchGoods() {
                this.$http
                    .get({
                        url: '/SnatchApi/getShopSnatchGoods',
                        data: {
                            page: this.page,
                            limit: this.limit
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        result.length < this.limit ? (this.getMore = false) : (this.getMore = true);
                    });
            },
            getMemberSnatchGoods() {
                this.$http
                    .get({
                        url: '/SnatchApi/getMemberSnatchGoods',
                        data: {
                            page: this.page,
                            limit: this.limit
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        result.length < this.limit ? (this.getMore = false) : (this.getMore = true);
                    });
            },
            init() {
                this.page = 1;
                this.getMore = false;
                this.pageData = [];
                this.current == 0 ? this.getShopSnatchGoods() : this.getMemberSnatchGoods();
                this.$pop.pageScrollTo();
            },
            click(e) {
                this.current = e.index;
                this.snatch_type = e.snatch_type;
                this.init();
            },
            toClassify(item) {
                this.toUrl(`classify?id=${item.id}`);
            },
            issue() {
                if (!this.vid) return (this.showModal = true);
                uni.showActionSheet({
                    itemList: [this.snatch[0].name, this.snatch[1].name],
                    success: (res) => {
                        if (res.tapIndex == 0) return this.toUrl(`issueOne?snatch_type=1`);
                        if (res.tapIndex == 1) return this.toUrl(`issueTwo?snatch_type=2`);
                    }
                });
                // if (this.snatch_type == 1) this.toUrl(`issueOne?snatch_type=${this.snatch_type}`);
                // if (this.snatch_type == 2) this.toUrl(`issueTwo?snatch_type=${this.snatch_type}`);
            },
            toPush() {
                if (!this.vid) return (this.showModal = true);
                this.toUrl(`myPost?snatch_type=${this.snatch_type}`);
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'totalHeight']),
            activeStyle() {
                return {
                    color: '#000',
                    fontSize: '34rpx',
                    fontWeight: '500'
                };
            },
            inactiveStyle() {
                return {
                    color: '#666',
                    fontSize: '32rpx'
                };
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.current == 0 ? this.getShopSnatchGoods() : this.getMemberSnatchGoods();
        },
        onPageScroll(e) {
            let scrollTop = e.scrollTop;
            if (scrollTop > 200) {
                this.hideBg = 0;
                this.txtColor = false;
                this.backColor = false;
                this.title = this.info.classify_name;
            } else {
                this.hideBg = 1;
                this.txtColor = true;
                this.backColor = true;
                this.title = ' ';
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 130rpx;
    }
</style>
<style lang="scss" scoped>
    .tab {
        width: 100%;
        background-color: #fff;
        padding: 12rpx 0;
        display: flex;
        flex-wrap: wrap;
        .tabList {
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 20rpx 0;
            .tabImg {
                width: 100rpx;
                height: 100rpx;
            }
            .tabName {
                color: #000;
                font-size: 28rpx;
                margin-top: 8rpx;
                text-align: center;
            }
        }
    }
    .Tabs {
        width: 100%;
        background-color: $page;
    }
    .fixBox {
        width: 100%;
        height: 110rpx;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        display: flex;

        align-items: center;
        border-top: 1px solid $page;
        .Me {
            width: 200rpx;
            height: 100%;
            display: flex;

            align-items: center;
            justify-content: center;
            border-left: 1px solid $page;
        }
    }
    .releaseBox {
        position: fixed;
        right: 20rpx;
        bottom: 10%;
        z-index: 88;
        .release {
            width: 80rpx;
            height: 80rpx;
            background-color: var(--color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            .publish_num {
                width: 36rpx;
                height: 36rpx;
                background-color: #ff0000;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                right: -10rpx;
                z-index: 88;
                border-radius: 50%;
                font-size: 20rpx;
            }
        }
    }
</style>
